<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow title="编辑资料" @click-left="$router.back()" />

    <!-- 编辑区 -->
    <van-cell-group>
      <input ref="refPhoto" type="file" hidden @change="changePhoto">
      <van-cell is-link title="头像" center @click="$refs.refPhoto.click()">
        <van-image
          slot="default"
          :src="userInfo.photo"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
        />
      </van-cell>

      <van-cell is-link title="名称" :value="userInfo.name" @click="editName" />
      <van-cell is-link title="性别" :value="userInfo.gender === 0? '男': '女' " @click="showGender=true" />
      <van-cell is-link title="生日" :value="userInfo.birthday" @click="editBirthday" />
    </van-cell-group>

    <!-- 修改名字 -->
    <van-dialog v-model="showName" title="修改姓名" show-cancel-button @confirm="saveName">
      <van-field v-model.trim="newName" placeholder="请输入姓名" />
    </van-dialog>

    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false" />
      <van-cell title="男" is-link @click="saveGender(0)" />
      <van-cell title="女" is-link @click="saveGender(1)" />
    </van-popup>

    <!-- 修改日期 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="newDate"
        type="date"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="saveBirthday"
        @cancle="showBirthday=false"
      />
    </van-popup>
  </div>
</template>

<script>
import { reqGetProfile, reqEditUserInfo, reqChangePhoto } from '@/api/user'
import dayjs from 'dayjs'
export default {
  name: 'Profile',
  data() {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      userInfo: {},
      newName: '',
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(),
      newDate: new Date()
    }
  },
  created() {
    this.loadProfile()
  },
  methods: {
    async loadProfile() {
      const res = await reqGetProfile()
      this.userInfo = res.data
      console.log(res)
    },

    editName() {
      this.showName = true
      // 回显
      this.newName = this.userInfo.name
      // 该数值
    },

    async saveName() {
      try {
        if (this.newName === '') return
        if (this.newName.length > 7) {
          this.$toast.fail('名字长度不能超过 7 个字符')
          return
        }
        const res = await reqEditUserInfo({ name: this.newName })
        console.log(res)
        this.userInfo.name = this.newName
        this.newName = ''
        this.showName = false
        this.$toast.success('修改成功')
      } catch (e) {
        console.log(e)
        this.$toast.fail('修改失败哦')
      }
    },

    async saveGender(gender) {
      await reqEditUserInfo({ gender })
      this.userInfo.gender = gender
      this.showGender = false
      this.$toast('修改成功')
    },

    editBirthday() {
      this.showBirthday = true
      this.newDate = new Date(this.userInfo.birthday)
    },

    async saveBirthday() {
      try {
        // 更改格式
        const birthday = dayjs(this.newDate).format('YYYY-MM-DD')
        await reqEditUserInfo({ birthday })
        this.userInfo.birthday = birthday
        this.showBirthday = false
        this.$toast.success('修改成功')
      } catch (e) {
        this.$toast.fail('修改失败哦')
        this.showBirthday = false
        console.log(e)
      }
    },

    async changePhoto(e) {
      try {
        const file = e.target.files[0]
        if (!file) return
        this.$toast.loading({
          message: '头像上传中',
          forbidClick: true,
          overlay: true
        })
        const formData = new FormData()
        formData.append('photo', file)
        const res = await reqChangePhoto(formData)
        console.log(res)
        this.userInfo.photo = res.data.photo
        this.$toast.success('上传成功')
      } catch {
        this.$toast.fail('上传失败')
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.profile{
  ::v-deep{
    .van-icon-arrow-left{
      color: #fff;
    }
  }
}
</style>
